page{ background: rgb(235, 235, 235); }


.head-box{
    width: 100%;height: 120px;margin-bottom: 30rpx;
    .head-main{
        position: fixed;top: 0;left: 0;background: #fff;z-index: 10;
        width: 100%;height: 120px;padding: 10rpx 20rpx;
        box-sizing: border-box;
        font-size: 12px;color: #000;
        box-shadow: 0 0 20rpx rgba(246, 247, 248, 0.5);
        .item{
            text-align: left;margin-bottom: 20rpx;
        }
        .red{
            font-size: 20px;color: red;font-weight: bold;
        }
    }
}

.item{
    width: 710rpx;margin: 10rpx auto;background: #ffffff;box-shadow: 0 0 10rpx rgba(100, 100, 100,0.1);
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    .header{
        display: flex;justify-content: flex-start;align-items: flex-start;
        flex-direction: column;
        width: 100%;padding: 10rpx 0;
        border-bottom: 1px solid rgb(240, 240, 240);
        .time{
            display: flex;justify-content: space-between;
            font-size: 12px;color: #999999;
            width: 100%;
            .draw_number{
                font-size: 12px;color: rgb(66, 135, 238);margin-left: 10rpx;
            }
        }
        .winning_numbers{
            display: flex;justify-content: flex-end;align-items: center;margin-top: 10rpx;
            width: 100%;
            text{
                display: block;width: 40rpx;height: 40rpx;margin-right: 2px;
                border-radius: 50%;
                border: 1px solid #e0e0e0;
                text-align: center;line-height: 40rpx;
                font-size: 12px;
                &.active{
                    background: #017dd6;color: #fff;
                }
                &.active2{
                    background: #f9c301;color: #fff;
                }
            }
        }
    }
    .ul{
        display: flex;justify-content: flex-end;align-items: center;
        padding: 20rpx 0 10rpx;
        &.no_win{
            /*grayscale(val):val值越大灰度就越深*/
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
        &._line{
            border-bottom: 1px dashed #ee194f;padding-bottom: 20rpx;
        }
        .price{
            width: 140rpx;height: 40rpx;background: rgb(240, 240, 240);border-radius: 6px;overflow: hidden;
            font-size: 10px;font-size: 10px;color: #999;font-weight: bold;text-align: center;line-height: 40rpx;
            &.red{
                color: red;font-size: 20px;
            }
            &.num_0{
                color: #999 !important;font-size: 10px !important;
            }
        }
        text{
            display: block;width: 50rpx;height: 50rpx;margin-right: 4px;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
            text-align: center;line-height: 50rpx;
            font-size: 14px;
            &.active{
                background: #017dd6;color: #fff;
            }
            &.active2{
                background: #f9c301;color: #fff;
            }
            &.win{
                position: relative;
                &::after{
                    position: absolute;bottom: -4px;left: 50%;transform: translateX(-50%);
                    display: block;content: '';
                    width: 20px;height: 4px;background: red;
                }
            }
        }
    }
}

.pop{
	position: fixed;top:0;right: 0;left: 0;z-index: 11;
	background: rgba(0, 0, 0, 1);
    .close{
        position: absolute;top: 0;right: 0;width: 100rpx;height: 100rpx;
        display: flex;justify-content: center;align-items: center;
        transform: rotate(45deg);
        font-size: 20px;color: #ccc;font-weight: bold;
    }
	.main{
		position: absolute;top:50%;left: 50%;
		transform: translate(-50%,-50%);
		background: #ffffff;
		padding: 30rpx;
	}
    .ul{
        display: flex;justify-content: flex-end;align-items: center;
		padding: 20rpx 0 10rpx;
        margin-bottom: 30rpx;
        &.no_win{
            /*grayscale(val):val值越大灰度就越深*/
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
        &._line{
            border-bottom: 1px dashed #ee194f;padding-bottom: 20rpx;
        }
        .price{
            width: 140rpx;height: 40rpx;background: rgb(240, 240, 240);border-radius: 6px;overflow: hidden;
            font-size: 10px;font-size: 10px;color: #999;font-weight: bold;text-align: center;line-height: 40rpx;
            &.red{
                color: red;font-size: 20px;
            }
            &.num_0{
                color: #999 !important;font-size: 10px !important;
            }
        }
        text{
            display: block;width: 80rpx;height: 80rpx;margin-right: 4px;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
            text-align: center;line-height: 80rpx;
            font-size: 16px;font-weight: bold;
            &.active{
                // background: #017dd6;color: #fff;
            }
            &.active2{
                background: #017dd6;color: #fff;
            }
            &.win{
                position: relative;
                &::after{
                    position: absolute;bottom: -4px;left: 50%;transform: translateX(-50%);
                    display: block;content: '';
                    width: 20px;height: 4px;background: red;
                }
            }
        }
    }

}